<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-hatchetAgent-add">
			<div class="form-group">	
				<label class="col-sm-3 control-label">上级代理商名称：</label>
				<div class="form-control-static" th:text="${hatchetAgent.agentName}"></div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">代理商名称：</label>
				<div class="col-sm-8">
					<input id="agentName" name="agentName" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<input type="hidden" id="parentId" name="parentId" th:value="${hatchetAgent.iD}">	
				<label class="col-sm-3 control-label">代理商等级：</label>
				<div class="col-sm-8">
					<select  id="tYPE" name ="tYPE" class="form-control m-b" th:with="type=${@dict.getType('addAgent_type')}">
						<option value="">请选择</option>
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
							th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group" id="codeDiv">	
				<label class="col-sm-3 control-label">代理商升级码：</label>
				<div class="col-sm-8">
					<input id="fastCount" name="fastCount" class="form-control" type="text">
				</div>
			</div>
			
			

			<div class="form-group">	
				<label class="col-sm-3 control-label">代理商所在地：</label>
				<input style="margin-left: 10px;height:32px; "  type= "text" id="provinceId"  value=""/>
		    	<input type="hidden" id="provinceIdList" name="provinceId">
		    	<select style="margin-left: 10px;width: 165px;height: 32px;"  id="cityId" name="cityId" ><option value="">请选择</option></select>
		    	<select style="margin-left: 10px;width: 165px;height: 32px;"  id="areaId" name="areaId" ><option value="">请选择</option></select>
			</div>	
			<div class="form-group">	
				<label class="col-sm-3 control-label">开户行所在地：</label>
				<input style="margin-left: 10px;height:32px; " type= "text" id="bankProvinceId" value=""/>
		    	<input type="hidden" id="bankProvinceIdList" name="bankProvinceId">
		    	<select style="margin-left: 10px;width: 165px;height: 32px;" id="bankCityId" name="bankCityId" ><option value="">请选择</option></select>
		    	<select style="margin-left: 10px;width: 165px;height: 32px;" id="bankAreaId" name="bankAreaId" ><option value="">请选择</option></select><br>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">开户银行：</label>
				<div class="col-sm-8">
					<input type= "text" id="issbankList" class="form-control" value=""/><br>
		    		<input type="hidden" id = "issbankId" name="issbankId">
		    	</div>
			</div>
			
			<div class="form-group">	
				<label class="col-sm-3 control-label">银行账户名称：</label>
				<div class="col-sm-8">
					<input id="aDDRESS" name="aDDRESS" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">银行账户：</label>
				<div class="col-sm-8">
					<input id="bankAccount" name="bankAccount" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">法人名称：</label>
				<div class="col-sm-8">
					<input id="corpName" name="corpName" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">法人手机号：</label>
				<div class="col-sm-8">
					<input id="corpPhone" name="corpPhone" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">法人身份证：</label>
				<div class="col-sm-8">
					<input id="idCardNo" name="idCardNo" class="form-control" type="text">
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    
    <script th:inline="javascript">
		var hatchetAgent = [[${hatchetAgent}]];
		var level = hatchetAgent.type;
	</script>
    
    
    <script type="text/javascript">
		var prefix = ctx + "system/hatchetAgent"
		$("#form-hatchetAgent-add").validate({
			rules:{
				tYPE:{
					required:true,
				},
				provinceId:{
					required:true,
				},
				cityId:{
					required:true,
				},
				areaId:{
					required:true,
				},
				bankProvinceId:{
					required:true,
				},
				bankCityId:{
					required:true,
				},
				bankAreaId:{
					required:true,
				},
				issbankId:{
					required:true,
				},
				aDDRESS:{
					required:true,
				},
				bankAccount:{
					required:true,
				},
				corpName:{
					required:true,
				},
				corpPhone:{
					required:true,
				},
				idCardNo:{
					required:true,
				},
				agentName:{
					required:true,
				},
				
			}
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/savaOrUpdateAgent", $('#form-hatchetAgent-add').serialize());
	        }
	    }
		
		var provinceList = [];
		var bankProvinceList = [];
		var issbankList = [];
		//页面初始化方法
		$(function(){
			getProvince();
			getBankProvince();
			banks();
			leveSelectShow();//level选择框是否显示
			if(level == 1 || level == 2 || level == 3){
				$("#codeDiv").hide();
			}
	
			$("#issbankList").autocomplete({
				source: banks(),
				select:function(event, ui) {
					$("#issbankId").val(ui.item.id);
					$("#issbankList").val(ui.item.value);
				}
			});
			$("#provinceId").autocomplete({
				source: getProvince(),
				select:function(event, ui) {
					$("#provinceIdList").val(ui.item.id)
					var provinceId = $("#provinceIdList").val();
					$("#provinceId").val(ui.item.value);
					$("#provinceIdList").val(ui.item.id);
					getCityByProvinceId(provinceId);
				}
			});
			$("#bankProvinceId").autocomplete({
				source: getBankProvince(),
				select:function(event, ui) {
					$("#bankProvinceIdList").val(ui.item.id)
					var provinceId = $("#bankProvinceIdList").val();
					$("#bankProvinceId").val(ui.item.value);
					$("#bankProvinceIdList").val(ui.item.id);
					getBankCityByProvinceId(provinceId);
				}
			});
			//查询市下的区
			$("#cityId").bind("change",function(){
				var cityId=$("#cityId").val();
				getAreaByCityId(cityId);		
			});
			
			//查询市下的区
			$("#bankCityId").bind("change",function(){
				var cityId=$("#bankCityId").val();
				getBankAreaByCityId(cityId);		
			});
			
		});
		//获取省列表
		function getProvince() {
			var array=[];
			$.ajax({
				url: prefix + "/getAllProvince",
				async:false,
				type:"POST",
				data:{},
				success: function(result) {
					$.each(result, function(i,v) {
						if (v.divisionName != null && v.divisionName != undefined) {
							var arrays = {};
							arrays.value = v.divisionName;
							arrays.id = v.id;
							array.push(arrays);
						}
					});
				}
			});
			return array;
		}

		// 获取某个省下的市列表
		function getCityByProvinceId(provinceId) {
			$("#cityId").empty();
			var _default = "<option id='' value=''>请选择</option>";
			var optionStatus=_default;
			var cityOrarea = $("#provinceIdList").val();
			$.ajax({
				url : prefix + '/getHatchetAdministrativeDivisionsByChinaAreaId',
				async : false,
				type : "POST",
				data : {
					"parentId" : provinceId
				},
				success : function(result) {
					$.each(result, function(k, v) {
						if ('' != provinceId) {
							optionStatus=optionStatus+"<option id='"+v.id+"'  value='"+v.id+"'>"+v.divisionName+"</option>";
						}
					});
				}
			});	
			$("#cityId").append(optionStatus);
			if(cityOrarea!=""){
				getAreaByCityId(cityOrarea);
			} else {
				$("#areaId").html('').append(_default);
			}
		};
		// 获取某个市下的地区列表
		function getAreaByCityId(area){
			$("#areaId").empty();
			var optionStatus="<option id=''  value=''>请选择</option>";
			
			$.ajax({
				  url: prefix +'/getHatchetAdministrativeDivisionsByChinaAreaId',
				  async:false,
				  type:"POST",
				  data:{
					  "parentId":area
				  },
				  success : function(result) {
						$.each(result, function(k, v) {
							if ('' != area) {
								optionStatus=optionStatus+"<option value='"+v.id+"' >"+v.divisionName+"</option>";
							} 
						});
					}
			});
			$("#areaId").append(optionStatus);
		};
	

		//获取省列表
		function getBankProvince() {
			var array=[];
			$.ajax({
				url: prefix + "/getAllProvince",
				async:false,
				type:"POST",
				data:{},
				success: function(result) {
					$.each(result, function(i,v) {
						if (v.divisionName != null && v.divisionName != undefined) {
							var arrays = {};
							arrays.value = v.divisionName;
							arrays.id = v.id;
							array.push(arrays);
						}
					});
				}
			});
			return array;
		}

		// 根据省获取市
		function getBankCityByProvinceId(bankProvinceId,_clear) {
			$("#bankCityId").empty();
			var _default = "<option id='' value=''>请选择</option>";
			var optionStatus=_default;
			var cityOrarea = $("#bankProvinceIdList").val();
			$.ajax({
				url : prefix + '/getHatchetAdministrativeDivisionsByChinaAreaId',
				async : false,
				type : "POST",
				data : {
					"parentId" : bankProvinceId
				},
				success : function(result) {
					$.each(result, function(k, v) {
						if ('' != bankProvinceId) {
							optionStatus=optionStatus+"<option value='"+v.id+"'>"+v.divisionName+"</option>";
						}
					});
				}
			});	
			$("#bankCityId").append(optionStatus);
			if(cityOrarea!=""){
				getBankAreaByCityId(cityOrarea);
			} else {
				$("#bankAreaId").html('').append(_default);
			}
		};
		// 根据市获取地区
		function getBankAreaByCityId(area){
			$("#bankAreaId").empty();
			var optionStatus="<option id=''  value=''>请选择</option>";
			
			$.ajax({
				  url: prefix +'/getHatchetAdministrativeDivisionsByChinaAreaId',
				  async:false,
				  type:"POST",
				  data:{
					  "parentId":area
				  },
				  success : function(result) {
						$.each(result, function(k, v) {
							if ('' != area) {
								optionStatus=optionStatus+"<option value='"+v.id+"' >"+v.divisionName+"</option>";
							} 
						});
					}
			});
			$("#bankAreaId").append(optionStatus);
		};

		function banks() {
			var array=[];
			$.ajax({
				url: prefix + "/getIssBankAll",
				async:false,
				type:"POST",
				data:{},
				success: function(result) {
					$.each(result, function(i,v) {
						if (v.bankName != null && v.bankName != undefined) {
							var arrays = {};
							arrays.value = v.bankName;
							arrays.id = v.id;
							array.push(arrays);
						}
					});
				}
			});
			return array;
		}
		
		function leveSelectShow(){
			$("#lEVELSelect").hide();
			$("#tYPE").change(function(){
			    var opt=$("#tYPE").val();
			   if(opt=="3"){
				   $("#lEVELSelect").show();
			   } else {
				   $("#lEVELSelect").hide();
			   }
			});
		}
	</script>
</body>
</html>
